import router, { asyncRoutes } from '@/router'
import store from '@/store'
import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式

const whiteList = ['/login', '/404']
// to:跳转到哪里去
// from:从哪里跳转的过来
// next:放行或者重定向  next()   next('/')
router.beforeEach(async(to, from, next) => {
  // 开始加载
  NProgress.start()
  // 获取token
  const token = store.getters.token
  // console.log(store)
  const userInfo = store.state.user.userInfo
  if (token) {
    // 有token的场景
    if (to.path === '/login') {
      // 如果用户有token 并且想跳转到登录页 则跳转首页
      next('/')
      NProgress.done()
    } else {
      // 如果用户有token 想跳转到非登录页
      // !userInfo.userId
      if (Object.keys(userInfo).length <= 0) {
        const { roles: { menus }} = await store.dispatch('user/getUserProfile')
        // console.log(menus)
        // 拿到权限标识之后
        // 1.拿menus和动态路由进行筛选，得到符合条件的路由规则
        let otherRoutes = asyncRoutes.filter(item => menus.includes(item.children[0].name))
        // 2.拿到符合条件的路由规则之后，动态添加到路由对象中
        otherRoutes = [...otherRoutes, { path: '*', redirect: '/404', hidden: true }]
        store.commit('permission/setRoutes', otherRoutes)
        router.addRoutes(otherRoutes) // 异步执行
        // 下面这行代码可以保证addRoutes 异步执行完毕
        next({
          // path: to.path,
          // params: to.params,
          ...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次)
          replace: true // 重进一次, 不保留重复历史
        })
        return
      }
      next()
    }
  } else {
    // 没token的场景
    if (whiteList.includes(to.path)) {
      // 如果用户没有token 想访问白名单中的内容 直接放行
      next()
    } else {
      // 如果用户没有token, 访问项目中其他页面 跳转到登录页
      next('/login')
      NProgress.done()
    }
  }
})

router.afterEach((to, from) => {
  NProgress.done()
})
